<template>
  <div id="map"></div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, PropType } from 'vue';
import mapInit from './mapInit';
import appStore from '@/store';
import env from '@/env/env'

interface MapProps {
  token: string;
  solution: string;
  toolShow?: Boolean;
}
let map: any = null;
const props = defineProps({
  token: {
    type: String as PropType<MapProps['token']>,
    default: MYCONF.MAP.TOKEN,
  },
  solution: {
    type: String as PropType<MapProps['solution']>,
    default: MYCONF.MAP.SOLUTION,
  },
  toolShow: {
    type: Boolean as PropType<MapProps['toolShow']>,
    default: true,
  },
});
const { updateIsMapLoaded } = appStore.mapStateStore
onMounted(() => {
  // 置空初始状态
  updateIsMapLoaded(false)
  nextTick(() => {
    map = mapInit('map', props.token, props.solution)
    map.on('load', () => {
      console.log('地图加载完毕') // laochen log
      updateIsMapLoaded(true)
    })
  })
})

</script>
<style lang="less" scoped>
#map {
  width: 100%;
  height: 100%;
  z-index: 2;
  flex: 1;
  position: absolute;
}
</style>
